'use client'

import { useRouter } from 'next/navigation'
import React, { useRef, useState } from 'react'
import { FileImage, Paperclip, } from 'lucide-react'
import { AnimatePresence, motion } from "framer-motion"

import { Textarea } from '@/components/ui/textarea'
import EmojiPicker from '@/components/ai/chat/emoji-picker'

import { useChatContextSelector } from '@/context/chat-context'

export const BottombarIcons = [{ icon: FileImage }, { icon: Paperclip }]
const SimpleChatInput = () => {
    const router = useRouter()

    const [input, setInput] = useState<string>('')
    const inputRef = useRef<HTMLTextAreaElement>(null)
    const [clearMessages, sendMessage] = useChatContextSelector(state => [
        state.clearMessages,
        state.sendMessage
    ])

    const handleSend = () => {
        const content = input.trim()
        if (content) {
            clearMessages()
            sendMessage(content)
            router.push(`/ai/chatbot`)
        }
    }

    const handleKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault()
            handleSend()
        }
        if (event.key === 'Enter' && event.shiftKey) {
            event.preventDefault()
            setInput(prev => prev + '\n')
        }
    }

    const resizeTextArea = () => {
        if (inputRef.current) {
            inputRef.current.style.height = 'auto'
            inputRef.current.style.height = `${inputRef.current.scrollHeight}px`
        }
    }

    return (
        <AnimatePresence initial={false}>
            <motion.div
                key='input'
                className='w-full relative'
                layout
                initial={{ opacity: 0, scale: 1 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 1 }}
                transition={{
                    opacity: { duration: 0.05 },
                    layout: { type: 'spring', bounce: 0.15 }
                }}
            >
                <Textarea
                    autoComplete='off'
                    value={input}
                    ref={inputRef}
                    onKeyDown={handleKeyPress}
                    onChange={event => {
                        setInput(event.target.value)
                        resizeTextArea()
                    }}
                    name='message'
                    placeholder='Aa'
                    className='min-h-0 max-h-32 pr-8 shadow-sm focus-visible:ring-1 focus-visible:ring-offset-0 w-full border rounded-md flex items-center h-14 bg-background'
                />
                {/* <div className='absolute left-2 top-2'>
                    <Mic size={20} className='text-muted-foreground' />
                </div> */}
                <div className='absolute right-2 bottom-0.5'>
                    <EmojiPicker onChange={value => {
                        setInput(input + value)
                        inputRef.current?.focus()
                    }} />
                </div>
            </motion.div>
        </AnimatePresence>
    )
}

export default SimpleChatInput